<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.journalLog') }}</h2>
        </template>
      </PageTitle>
      <div class="filter-container">
        <el-select v-model.number="listQuery.operator_uid" :placeholder="$t('table.operator')" clearable style="width: 130px" class="filter-item" @clear="() => { listQuery.operator_uid=undefined } ">
          <el-option v-for="(item,index) in importanceOptions" :key="index" :label="item.user_name" :value="item.id" />
        </el-select>
        <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px;margin-left: 10px;" @clear="() => { listQuery.type=undefined } ">
          <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <el-date-picker
          v-model="listQuery.created_start"
          type="datetime"
          :placeholder="$t('table.StartDateTime')"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="margin-left: 10px;"
        />
        <el-date-picker
          v-model="listQuery.created_end"
          type="datetime"
          :placeholder="$t('table.EndDateTime')"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="margin-left: 10px;"
        />
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="search">
          {{ $t('button.search') }}
        </el-button>
      </div>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list">
        <el-table-column label="ID" prop="id" sortable />
        <el-table-column :label="$t('table.operator')" prop="operator_name" />
        <el-table-column :label="$t('table.type')" prop="type" :formatter="typeChange" />
        <el-table-column :label="$t('table.Logcontent')" prop="content" />
        <el-table-column :label="$t('table.Operationtime')" prop="created_at">
          <template v-slot="{row}">
            {{ row.created_at| timeStanp }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="listQuery.limit" :current-page="listQuery.page" @current-change="changePage" />
      </el-row>
    </div>
  </div>
</template>
<script>
import { getJournal, getUserAdminList } from '@/api/user'
import user from '@/store/modules/user'
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        created_end: undefined,
        created_start: undefined,
        type: undefined,
        operator_uid: undefined,
        bid: undefined,
        id: 0
      },
      count: 0,
      importanceOptions: [],
      calendarTypeOptions: [
        { key: 1, display_name: this.$t('filters.Login') },
        { key: 2, display_name: this.$t('filters.Add') },
        { key: 3, display_name: this.$t('filters.Edit') },
        { key: 4, display_name: this.$t('filters.Delete') },
        { key: 5, display_name: this.$t('filters.Sort') },
        { key: 6, display_name: '初审' },
        { key: 7, display_name: '复审' },
        { key: 8, display_name: '确认完成' }
        // { key: 9, display_name: this.$t('filters.Closed') }
      ],
      downloadLoading: false,
      list: []
    }
  },
  created() {
    this.listQuery.bid = parseFloat(user.state.userInfo.bid)
    this.getJournal()
    this.getUserAdmin()
  },
  methods: {
    // 获取管理员列表
    async getUserAdmin() {
      const data = {
        page: 1,
        limit: 100,
        bid: parseFloat(user.state.userInfo.bid)
      }
      const { list } = await getUserAdminList(data)
      this.importanceOptions = list
    },
    async getJournal() { // 请求数据
      this.downloadLoading = true
      const { count, list } = await getJournal(this.listQuery)
      this.count = count
      this.list = list
      this.downloadLoading = false
    },
    changePage(newPage) { // 点击分页
      this.listQuery.page = newPage
      this.getJournal()
    },
    // 数据转化
    typeChange(row, column) {
      var display_name = ''
      var data = row[column.property]
      if (data === 1) {
        display_name = this.$t('filters.Login')
      } else if (data === 2) {
        display_name = this.$t('filters.Add')
      } else if (data === 3) {
        display_name = this.$t('filters.Edit')
      } else if (data === 4) {
        display_name = this.$t('filters.Delete')
      } else if (data === 5) {
        display_name = this.$t('filters.Sort')
      } else if (data === 6) {
        display_name = '初审'
      } else if (data === 7) {
        display_name = '复审'
      } else if (data === 8) {
        display_name = '确认完成'
      } else if (data === 9) {
        display_name = this.$t('filters.Closed')
      } else {
        display_name = ''
      }
      return display_name
    },
    search() {
      this.listQuery.page = 1
      this.getJournal()
    }
  }
}
</script>
<style lang="scss">
  .el-table{
    margin-top:30px
  }
</style>
